<template>
  <div class="my-app-page">
    <div class="header">
      <div class="header-content u-f u-f-ac u-f-jsb">
        <h2 class="title">Hi bluesky，开始你的创作</h2>
        <a-button @click="openAppModal">创建应用</a-button>
      </div>
    </div>
    <div class="my-app-content">
      <section class="my-app-list u-f u-fw">
        <div
          class="my-app-card"
          v-for="item in appStore.appList"
          :key="item.id"
          @click="goApp(item)"
        >
          <div class="card-top u-f u-f-ac">
            <div class="icon u-f u-f-ac u-f-jc">
              <DribbbleOutlined style="font-size: 24px; color: #ffffff" />
            </div>
            <span class="name">{{ item.name }}</span>
          </div>
          <p class="card-desc">{{ item.desc || '暂无描述' }}</p>
          <!-- <EllipsisOutlined /> -->
          <div class="card-bottom u-f u-f-je">
            <div class="options-box u-f u-f-ac u-f-jc">
              <a-dropdown>
                <a class="ant-dropdown-link" @click.prevent>
                  <EllipsisOutlined style="font-size: 24px" />
                </a>
                <template #overlay>
                  <a-menu @click="handleAppCard($event, item)">
                    <a-menu-item key="1">应用设置</a-menu-item>
                    <a-menu-item key="2">访问应用</a-menu-item>
                    <a-menu-item key="3">删除应用</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 创建修改应用的弹窗 -->
    <a-modal
      v-model:visible="showAppModal"
      :title="isAddApp ? '创建应用' : '编辑应用'"
      :footer="null"
      :afterClose="closeAppModal"
      :maskClosable="false"
    >
      <a-form
        :model="appModalForm"
        :rules="appModalRules"
        v-bind="appModalLayout"
        ref="appModalFormRef"
      >
        <a-form-item label="应用名称" name="name">
          <a-input
            v-model:value="appModalForm.name"
            placeholder="请输入应用名称"
          />
        </a-form-item>
        <a-form-item label="应用描述" name="desc">
          <a-input
            v-model:value="appModalForm.desc"
            placeholder="请输入应用描述"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="appModalSubmit">确认</a-button>
          <a-button style="margin-left: 10px" @click="closeAppModal"
            >取消</a-button
          >
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { Router, useRouter } from 'vue-router'
import { DribbbleOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'
import { uuid } from '@/assets/ts/util'
import { useAppMock } from '@/hooks/usePageJson'
import { useAppStore } from '@/store/app'
import { AppListItem } from '@/store/app.type'

// 创建修改应用的弹窗
const handleAppModal = (appStore: any, router: Router) => {
  const showAppModal = ref(false)
  const isAddApp = ref(true)
  const appModalFormRef = ref()

  const appModalForm = reactive({
    id: '',
    name: '',
    desc: '',
  })

  const appModalRules = {
    name: {
      required: true,
      trigger: 'blur',
      message: '请输入应用名称',
    },
  }

  const openAppModal = (isAdd = true, app?: AppListItem) => {
    showAppModal.value = true
    isAddApp.value = isAdd
    if (app) {
      appModalForm.id = app.id
      appModalForm.name = app.name
      appModalForm.desc = app.desc
    }
  }

  const closeAppModal = () => {
    showAppModal.value = false
    appModalForm.id = ''
    appModalForm.name = ''
    appModalForm.desc = ''
  }

  const appModalSubmit = () => {
    appModalFormRef.value.validate().then(() => {
      if (isAddApp.value) {
        const app = {
          id: 'app_' + uuid(),
          name: appModalForm.name,
          desc: appModalForm.desc,
        }

        appStore.addAppList(app)
        closeAppModal()
        message.success('创建应用成功，即将跳转')

        setTimeout(() => {
          const { setAppBasic } = useAppMock(app.id)
          setAppBasic(app)
          router.push(`/app/${app.id}`)
        }, 2000)
      } else {
        appStore.editAppList({
          id: appModalForm.id,
          name: appModalForm.name,
          desc: appModalForm.desc,
        })
        closeAppModal()
      }
    })
  }

  return {
    showAppModal,
    appModalForm,
    appModalRules,
    isAddApp,
    appModalLayout: { labelCol: { span: 4 } },
    appModalFormRef,
    openAppModal,
    closeAppModal,
    appModalSubmit,
  }
}
export default defineComponent({
  name: 'MyApp',
  components: {
    DribbbleOutlined,
    EllipsisOutlined,
  },
  setup() {
    const appStore = useAppStore()
    const router = useRouter()

    const goApp = (app: AppListItem) => {
      const { setAppBasic } = useAppMock(app.id)
      setAppBasic(app)
      router.push(`/app/${app.id}`)
    }

    const handleAppCard = ({ key }: MenuInfo, app: AppListItem) => {
      switch (key) {
        case '1':
          openAppModal(false, app)
          break
        case '3':
          appStore.deleteAppList(app.id)
          break
        default:
          break
      }
    }

    const {
      showAppModal,
      appModalForm,
      appModalRules,
      appModalLayout,
      isAddApp,
      appModalFormRef,
      openAppModal,
      closeAppModal,
      appModalSubmit,
    } = handleAppModal(appStore, router)

    return {
      appStore,
      handleAppCard,
      showAppModal,
      appModalForm,
      appModalRules,
      appModalLayout,
      isAddApp,
      appModalFormRef,
      openAppModal,
      closeAppModal,
      appModalSubmit,
      goApp,
    }
  },
})
</script>

<style lang="less" scoped>
.my-app-page {
  .header {
    height: 80px;
    background-image: url('../../assets/img/my-app-header-bg.png');
    background-size: 100% 100%;
    .header-content {
      width: 1200px;
      height: 100%;
      margin: auto;
    }
  }
  .my-app-content {
    padding-top: 30px;
    .my-app-list {
      width: 1200px;
      padding: 0 10px;
      margin: auto;
      box-sizing: border-box;
      .my-app-card {
        cursor: pointer;
        width: 280px;
        height: 150px;
        padding: 16px;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #f1f2f3;
        border-radius: 6px;
        box-sizing: border-box;
        &:hover {
          border: 1px solid #0089ff;
        }
        &:nth-of-type(4n) {
          margin-right: 0;
        }
        .card-top {
          margin-bottom: 16px;
          .icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 6px;
            background-color: #0089ff;
          }
          .name {
            font-size: 16px;
            font-weight: 700;
          }
        }
        .card-desc {
          font-size: 12px;
          color: #a2a3a5;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .card-bottom {
          .options-box {
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            &:hover {
              background-color: #f1f2f3;
            }
            .ant-dropdown-link {
              color: #878f95;
            }
          }
        }
      }
    }
  }
}
</style>